<template>
  <div class="process-container">
    <el-card class="process-card">
      <div slot="header" class="clearfix">
        <span>采购流程管理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="startProcess">启动采购流程</el-button>
      </div>
      
      <el-steps :active="activeStep" finish-status="success" simple>
        <el-step title="采购申请" />
        <el-step title="审批" />
        <el-step title="生成订单" />
        <el-step title="供应商发货" />
        <el-step title="到货登记" />
        <el-step title="质检" />
        <el-step title="入库" />
      </el-steps>
      
      <div class="process-info" v-if="currentProcess">
        <el-descriptions title="流程信息" :column="2" border>
          <el-descriptions-item label="流程ID">{{ currentProcess.id }}</el-descriptions-item>
          <el-descriptions-item label="流程名称">{{ currentProcess.processName }}</el-descriptions-item>
          <el-descriptions-item label="当前状态">{{ currentProcess.status }}</el-descriptions-item>
          <el-descriptions-item label="当前步骤">{{ currentProcess.currentStep }}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ currentProcess.startTime }}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{ currentProcess.endTime || '未结束' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      
      <div class="process-actions" v-if="currentProcess">
        <el-button type="primary" @click="nextStep">下一步</el-button>
        <el-button @click="refreshStatus">刷新状态</el-button>
      </div>
      
      <div class="process-result" v-if="resultMessage">
        <el-alert :title="resultMessage" type="success" show-icon />
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'PurchaseProcess',
  data() {
    return {
      activeStep: 0,
      currentProcess: null,
      resultMessage: ''
    }
  },
  methods: {
    startProcess() {
      axios.post('/api/core_process/purchase/start')
        .then(response => {
          this.resultMessage = response.data.msg
          // 这里可以添加获取最新流程信息的逻辑
        })
        .catch(error => {
          console.error('启动采购流程失败:', error)
          this.resultMessage = '启动采购流程失败'
        })
    },
    
    nextStep() {
      if (!this.currentProcess) {
        this.resultMessage = '请先启动流程'
        return
      }
      
      // 这里应该根据当前步骤更新到下一步
      // 为简化示例，我们只增加步骤索引
      if (this.activeStep < 6) {
        this.activeStep++
        this.resultMessage = `已进入第${this.activeStep + 1}步`
      } else {
        this.resultMessage = '流程已完成'
      }
    },
    
    refreshStatus() {
      if (!this.currentProcess) {
        this.resultMessage = '请先启动流程'
        return
      }
      
      // 获取流程状态的逻辑
      axios.get(`/api/core_process/status/${this.currentProcess.id}`)
        .then(response => {
          this.resultMessage = response.data.msg
        })
        .catch(error => {
          console.error('获取流程状态失败:', error)
          this.resultMessage = '获取流程状态失败'
        })
    }
  }
}
</script>

<style scoped>
.process-container {
  padding: 20px;
}

.process-card {
  margin-bottom: 20px;
}

.process-info {
  margin: 20px 0;
}

.process-actions {
  margin: 20px 0;
}

.process-result {
  margin-top: 20px;
}
</style>